<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>结算</title>
		<link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}"/>
		<link rel="stylesheet" type="text/css" href="css/cart.css" th:href="@{/css/cart.css}"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>

		<style type="text/css">
			.form-control{
				width: 100%;
			}

			 *{
				 margin:0;
				 padding:0;
			 }
			#box{
				display:none;
				z-index:9999;
				width:400px;
				height:250px;
				position: absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
				border:1px solid #ccc;
				border-radius:14px;
				background-color:#FFF;
			}
			#box h2{
				text-align:center;
				padding:20px 0;
			}
			#box button{
				width:70px;
				height:40px;
				margin-top:40px;
				margin-left:90px;


			}

		</style>
	</head>
	<body>
		<!--导航部分  begin-->
		<div th:replace="common/header :: header"></div>
		<!--导航部分 end-->

		<!--最顶端轮播图片 begin-->
		<div th:replace="common/carousel :: carousel"></div>
		<!--最顶端轮播图片 end-->

		<!--购物车 begin-->
		<!--外层div-->
		<div class="container">
			<!--左边-->
			<div class="col-md-8 col-sm-12">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;送货地址</a>
					</li>
				</ol>

				<!--送货地址  begin-->
				<div style="margin-bottom: 5px;" id="addrDiv">
					<ul class="list-group" id="address">
						<li class="list-group-item" th:if="${not #lists.isEmpty(addressList)}" th:each="address:${addressList}">
							<input type="radio" name="addr" th:value="${address.id}" th:text="${address.province} + ${address.city} + ${address.area} + ${address.detailAddress}">&nbsp;<span th:if="${address.isDefault} == '1'" class="text-success">默认地址</span>
						</li>
						<li class="list-group-item" th:if="${#lists.isEmpty(addressList)}">暂无收获地址，请添加收货地址！</li>
						<!--<li class="list-group-item"><input type="radio" name="addr">&nbsp;江苏省苏州市金阊区烽火路82号 天创大厦1层</li>
						<li class="list-group-item"><input type="radio" name="addr" checked>&nbsp;江苏省苏州市金阊区烽火路83号 天创大厦2层 &nbsp;<span class="text-success">默认地址</span></li>-->
					</ul>
					<a href="#" class="text-info" onclick="dispalyMoreAddr(this)">更多地址↓&nbsp;&nbsp;</a>
					<a href="javascript:void(0)" id="addAddr" class="text-success" data-toggle="modal" data-target="#addrModal">添加新地址</a>
				</div>
				<hr>


				<!--添加新地址模态框 begin-->
				<!-- 模态框（Modal） -->
				<div class="modal fade" id="addrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="myModalLabel">
									<span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;添加新收货地址
								</h4>
							</div>
							<div class="modal-body">
							<!--添加收货地址form表单-->
							<form action="#" class="form-horizontal" role="form" id="addressForm">
								<div class="form-group">
									<label class="col-md-2 control-label" style="margin-right: 2.9%;">所在地区:</label>

									<div data-toggle="distpicker">
										<div class="form-group col-sm-12 col-md-3">
										  <label class="sr-only" for="province1">Province</label>
										  <select class="form-control" id="province1" name="province"></select>
										</div>
										<div class="form-group col-sm-12 col-md-3">
										  <label class="sr-only" for="city1">City</label>
										  <select class="form-control" id="city1" name="city"></select>
										</div>
										<div class="form-group col-sm-12 col-md-3">
										  <label class="sr-only" for="district1">District</label>
										  <select class="form-control" id="district1" name="area"></select>
										</div>
									 </div>
								</div>
								<div class="form-group has-feedback" style="clear:both">
									<label class="col-sm-2 control-label">详细地址:</label>
									<div class="col-sm-5">
										<textarea class="form-control" id="deatails" name="detailAddress"></textarea>
									</div>

								</div>
								<div class="form-group has-feedback">
									<label class="col-sm-2 control-label">邮政编码</label>
									<div class="col-md-5">
										<input type="text" class="form-control" id="lastname2" name="emailCode" placeholder="邮政编码">
										<span class="glyphicon glyphicon-hand-left form-control-feedback"></span>
									</div>
								</div>

								<div class="form-group has-feedback">
									<label class="col-sm-2 control-label">姓名</label>
									<div class="col-sm-5">
										<input type="text" class="form-control" id="username" placeholder="收货人姓名" name="receiver">
										<span class="glyphicon glyphicon-user form-control-feedback"></span>
									</div>
								</div>

								<div class="form-group has-feedback">
									<label class="col-sm-2 control-label">电话</label>
									<div class="col-sm-5">
										<input type="tel" class="form-control" id="tel" placeholder="合法手机格式" name="tel">
										<span class="glyphicon glyphicon-phone form-control-feedback"></span>
									</div>
								</div>

								<div class="form-group">
								    <div class="col-sm-offset-2 col-sm-10">
								      <div class="checkbox">
								        <label>
								          <input type="checkbox" id="setDefaultAddr" name="isDefault" value="1"><span class="text-success">设置默认地址</span>
								        </label>
								      </div>
								    </div>
								</div>

								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<input type="button" class="btn btn-primary" value="提交地址" th:onclick="saveAddress()">
								</div>
							</form>
						<!--添加收货地址form表单 结束-->
						</div>
					</div>
				<!-- /.modal-content -->
				</div>
			</div>
				<!--左边-->
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;结算清单</a>
					</li>
				</ol>

				<!--确认订单列表 begin-->
				<div class="table-responsive" id="imgDiv">
					<table class="table table-hover table-striped" style="vertical-align:middle;">
						<thead>
							<tr class="text-success success">
								<th id="sequence">序号</th>
								<th>图片</th>
								<th>书名</th>
								<th>单价</th>
								<th>数量</th>
								<th>合计</th>
							</tr>
						</thead>
						<tbody id="tby">
							<tr th:each="cart,iter:${list}">
								<td th:text="${cart.bookId}">1001</td>
								<td><img src="images/tenxunchuan.jpg" th:src="@{'/images/' + ${cart.imgUrl}}"></td>
								<td th:text="${cart.bookName}">腾讯传</td>
								<td th:text="${cart.newPrice}">35.0元</td>
								<td th:text="${cart.count}">10</td>
								<td th:text="${cart.newPrice * cart.count}" th:id="${'cartPrice' + iter.index}">100$</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="4"></td>
								<td class="text-success">总价:</td>
								<td class="text-success" th:text="${session.userCartInfo.totalPrice} + '元'">345$:</td>
							</tr>
							<tr style="background-color: white;">
								<td>
									<a href="index.html" th:href="@{/}" class="btn btn-info">&lt;&lt;继续购买</a>
								</td>
								<td colspan="4"></td>
								<td>
									<a href="javascript:void(0)" th:onclick="confirm()" class="btn btn-warning">提交订单</a>
<!--									<a href="javascript:void(0)" th:onclick="commitOrder()" class="btn btn-warning">提交订单</a>-->
								</td>
							</tr>
							<div id="box">
								<h2>您确定要支付吗 </h2>
								<button class="btn btn-danger cancle">取消</button>
								<button class="btn btn-info contiune ">继续</button>

							</div>


							<script>

								function confirm(){
									//获取弹窗盒子

									var box = document.querySelector('#box')
									var cancle =document.querySelector('.cancle');
									var contiune = document.querySelector('.contiune')
									var val = $("input:radio[name='addr']:checked").val(); //获取选中的地址 id
									if(val == null){
										alert("请选择收获地址");
										return;
									}
									box.style.display='block';
									cancle.addEventListener('click',function(){
										window.location.href = "/order/commitOrder?addrId=" + val+"&status=0";
										box.style.display='none'
									})
									contiune.addEventListener('click',function(){
											window.location.href = "/order/commitOrder?addrId=" + val+"&status=1";

									})

								}

							</script>
						</tfoot>
					</table>
				</div>
				<!--确认订单列表 end-->
			</div>

			<!--右边-->
			<div class="col-md-4 col-sm-3 col-xs-8">
				<ol class="breadcrumb">
					<li>
						<a href="#" class="text-success"><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
					</li>
					<li>
						<a href="# " th:text="${session.userCartInfo.num} + '个商品'">3个商品</a>
					</li>
					<li>
						<a href="# " th:text="${'总价' + session.userCartInfo.totalPrice} + '元'" id="total">总价100元</a>
					</li>
				</ol>

			<!--猜您喜欢-->
				<div>
					<span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
					<div class="row" id="love">
						<div class="wow fadeInRight animated">
							<div class="thumbnail">
								<a href="details.html"><img src="images/dongjian.jpg" th:src="@{/images/dongjian.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
								<div class="caption ">
									<h3>洞见</h3>
								</div>
							</div>
						</div>
						<div class="wow fadeInRight animated">
							<div class="thumbnail ">
								<a href="details.html"><img src="images/tenxunchuan.jpg" th:src="@{/images/tenxunchuan.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
								<div class="caption ">
									<h3>腾讯传</h3>
								</div>
							</div>
						</div>
						<div class="wow fadeInRight animated">
							<div class="thumbnail ">
								<a href="details.html"><img src="images/taikong.jpg" th:src="@{/images/taikong.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
								<div class="caption ">
									<h3>太空</h3>
								</div>
							</div>
						</div>
						<div>
							<ul class="pager">
								<li>
									<a href="#" onclick="pageUp() ">&larr;上一页</a>
									<a href="#" onclick="pageDown() ">下一页 &rarr;</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--喜欢end-->
			</div>
		</div>

		<!--首页底部信息 begin-->
		<div th:replace="common/footer :: footer"></div>
		<!--首页底部信息end-->
    <!--end-->

		<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
		<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
		<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript"></script>
		<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
		<script src="dist/js/distpicker.data.min.js" th:src="@{/dist/js/distpicker.data.min.js}"></script>
		<script src="dist/js/distpicker.min.js" th:src="@{/dist/js/distpicker.min.js}"></script>
		<script src="js/details.js" th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" th:src="@{/js/cart.js}" type="text/javascript" charset="utf-8"></script>
		<script src="js/confirm_order.js" th:src="@{/js/confirm_order.js}"></script>
		<script type="text/javascript">
			if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
				new WOW().init();
			};

			//提交订单
			function commitOrder() {


			     //判断是否选择收货地址
				 var val = $("input:radio[name='addr']:checked").val(); //获取选中的地址 id
				 if(val == null){
				     alert("请选择收获地址");
				    return;
				 }else {
                    window.location.href = "/order/commitOrder?addrId=" + val;
				 }
            }

            //新增收货地址
			function saveAddress() {
				var addrData = $("#addressForm").serialize(); //把表单获取的内容序列化
				$.ajax({
					url: "/address/save",
					data: addrData,
					method: "post",
					success:function (data) {
						if(data == 'success'){
						    window.location.reload(true); //重新加载页面
						}
                    }
				})
            }
		</script>
	</body>
</html>
